<template>
  <view class="login-page">
    <!-- 标题区域 -->
    <view class="title-area">
      <text class="main-title">智慧养老综合服务平台</text>
      <text class="sub-title">开启智慧养老新时代</text>
    </view>

    <!-- 登录方式切换 -->
    <view class="login-type">
      <text 
        class="type-item" 
        :class="{ active: loginType === 'code' }" 
        @tap="loginType = 'code'"
      >
        验证码登录
      </text>
      <text 
        class="type-item" 
        :class="{ active: loginType === 'pwd' }" 
        @tap="loginType = 'pwd'"
      >
        密码登录
      </text>
    </view>

    <!-- 表单区域 -->
    <view class="form-area">
      <!-- 手机号输入 -->
      <view class="input-item">
        <input 
          type="number" 
          placeholder="请输入您的手机号码" 
          v-model="phoneNumber" 
          placeholder-style="color: #999;"
        />
      </view>

      <!-- 验证码/密码输入，根据登录类型切换 -->
      <view class="input-item" v-if="loginType === 'code'">
        <input 
          type="number" 
          placeholder="请输入手机验证码" 
          v-model="verifyCode" 
          placeholder-style="color: #999;"
        />
        <text class="get-code" @tap="getVerifyCode">获取验证码</text>
      </view>
      <view class="input-item" v-else>
        <input 
          type="password" 
          placeholder="请输入密码" 
          v-model="password" 
          placeholder-style="color: #999;"
        />
      </view>

      <!-- 登录说明 -->
      <text class="login-desc" v-if="loginType === 'code'">
        验证码登录可一键注册或登录
      </text>

      <!-- 登录按钮（调整宽度和间距） -->
      <view class="login-btn" @tap="handleLogin">登录</view>
    </view>

    <!-- 协议勾选（移至最下方） -->
    <view class="agreement-area">
      <checkbox 
        class="agreement-checkbox" 
        :checked="isAgree" 
        @change="isAgree = !isAgree"
      />
      <text class="agreement-text">
        我已阅读并同意
        <text class="agreement-link">隐私政策</text>
        <text class="agreement-link">用户协议</text>
        和
        <text class="agreement-link">平台协议</text>
      </text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loginType: 'code', // 默认验证码登录，可选 'code' | 'pwd'
      phoneNumber: '',
      verifyCode: '',
      password: '',
      isAgree: false, // 协议勾选状态
      codeCountdown: 0, // 验证码倒计时
      timer: null // 倒计时定时器
    };
  },
  methods: {
    // 获取验证码
    getVerifyCode() {
      if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }

      if (this.codeCountdown > 0) return;

      // 模拟请求验证码接口
      uni.showToast({
        title: '验证码已发送',
        icon: 'success'
      });

      // 启动倒计时
      this.codeCountdown = 60;
      this.timer = setInterval(() => {
        this.codeCountdown--;
        if (this.codeCountdown <= 0) {
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    },

    // 处理登录
    handleLogin() {
      if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }

      if (!this.isAgree) {
        uni.showToast({
          title: '请阅读并同意相关协议',
          icon: 'none'
        });
        return;
      }

      if (this.loginType === 'code') {
        if (!this.verifyCode) {
          uni.showToast({
            title: '请输入验证码',
            icon: 'none'
          });
          return;
        }
        // 验证码登录逻辑，实际需调接口
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        });
      } else {
        if (!this.password) {
          uni.showToast({
            title: '请输入密码',
            icon: 'none'
          });
          return;
        }
        // 密码登录逻辑，实际需调接口
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        });
      }
    }
  },
  beforeDestroy() {
    // 页面销毁时清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>

<style lang="scss">
.login-page {
  padding: 40rpx;
  background-color: #fff;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between; // 让内容垂直分布，协议区域自然到下方
}

.title-area {
  text-align: center;
  margin-top: 100rpx;

  .main-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 16rpx;
  }

  .sub-title {
    font-size: 24rpx;
    color: #666;
  }
}

.login-type {
  display: flex;
  justify-content: center;
  margin: 60rpx 0 40rpx;

  .type-item {
    font-size: 28rpx;
    color: #999;
    padding: 0 24rpx;
    position: relative;

    &.active {
      color: #007AFF;
      &::after {
        content: '';
        position: absolute;
        bottom: -8rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 32rpx;
        height: 4rpx;
        background-color: #007AFF;
        border-radius: 2rpx;
      }
    }
  }
}

.form-area {
  .input-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 24rpx 0;

    input {
      flex: 1;
      font-size: 28rpx;
      height: 48rpx;
      line-height: 48rpx;
    }

    .get-code {
      font-size: 24rpx;
      color: #007AFF;
      padding-left: 24rpx;
    }
  }

  .login-desc {
    font-size: 24rpx;
    color: #999;
    margin: 16rpx 0 60rpx; // 增加与登录按钮的间距
  }

  // 登录按钮调整：宽度占80%，增加与输入框的间距
  .login-btn {
    background-color: #007AFF;
    color: #fff;
    font-size: 28rpx; 
    text-align: center;
    border-radius: 30rpx; 
    padding: 20rpx 0; 
    margin: 0 auto; // 水平居中
    width: 80%; // 宽度占界面宽度的80%
  }
}

// 协议区域样式（移至最下方后，通过margin-top等调整间距）
.agreement-area {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999;
  margin-top: auto; // 自动占据下方空间
  margin-bottom: 40rpx;

  .agreement-checkbox {
    transform: scale(0.8);
    margin-right: 8rpx;
  }

  .agreement-link {
    color: #007AFF;
    margin: 0 4rpx;
  }
}
</style>